<template>
  <div>
    <p-card title="猜你喜欢">
      <ul class="prd-list">
        <li
          class="prd-list-item"
          v-for="item in productList"
          :key="item.skuId"
          @click="
            () => {
              router.push({
                path: '/product',
                query: {
                  spuId: item.spuId,
                  skuId: item.skuId,
                },
              });
            }
          "
        >
          <div class="lf">
            <img :src="baseUrl + item.skuDefaultImg" alt="" class="img" />
          </div>
          <div class="rt">
            <div class="title">
              {{ item.skuName }}
            </div>
            <div class="desc">销量: {{ item.saleCount }}</div>
            <div class="price red">￥{{ item.price }}</div>
          </div>
        </li>
      </ul>
    </p-card>
  </div>
</template>

<script setup>
import { recommendProduct } from "@/api/mall/client/product";
import PCard from "@/components-mall/PCard";
import { useRouter } from "vue-router";
const router = useRouter();
const baseUrl = import.meta.env.VITE_APP_BASE_API;
// 商品列表
const productList = ref([]);
const getProductList = async () => {
  const res = await recommendProduct();
  productList.value = res.data;
};
getProductList();
const goPage = (val) => {
  console.log(val);
};
</script>

<style lang="scss" scoped>
.prd-list {
  .prd-list-item {
    &:nth-child(1) {
      border-top: none;
    }
    border-top: 1px solid rgb(243 244 246);
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    .lf {
      width: 96px;
      height: 90px;
      padding-right: 6px;
      .img {
        width: 100%;
        height: 90px;
        object-fit: cover;
      }
    }
    .rt {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      .title {
        word-break: break-all;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>
